<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="css/login2.css">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/index_header.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <!--引入CSS代码-->
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <!--引入Js代码-->
    <script src="js/index.js"></script>


    <title>小米商城首页</title>
    <style>
        #sixth {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-bottom: 40px;
        }

        #sixth span {
            width: calc(19% - 100px); /* 计算宽度，减去边框延伸的尺寸 */
            margin: 20px 50px; /* 设置外边距，控制边框延伸的距离 */
            padding: 10px; /* 设置内边距 */
            box-sizing: border-box; /* 确保内边距不会增加元素的实际尺寸 */
            border: 2px solid transparent; /* 隐藏边框线 */
            border-radius: 8px; /* 圆角边框 */
            height: 200px; /* 直接设置高度为100px，由于box-sizing: border-box，这包括了内边距和边框 */
        }

        #sixth span img {
            display: block; /* 图片显示为块级元素 */
            width: 100%; /* 图片宽度100%填充span */
            height: auto; /* 自动高度 */
        }

        #sixth span a {
            display: block; /* 链接显示为块级元素，占满span宽度 */
            text-decoration: none; /* 取消下划线 */
            color: black; /* 设置文字颜色 */
        }

        #sixth span p {
            margin-top: 5px; /* 设置段落上方间距 */
            font-size: 14px; /* 设置段落文字大小 */
        }

        .waisixth {
            margin-bottom: 40px;
        }

    </style>
</head>
<body>
<%@ include file="header.jsp" %>


<ul class="nav nav-tabs" style="padding-left: 200px">
    <c:forEach items="${typeList}" var="item" varStatus="status">
        <li role="presentation" class="${status.index == 0 ? 'active' : ''}">
            <a href="${item.type_url}">${item.type_name}</a>
        </li>
    </c:forEach>
</ul>


<%--图片轮播--%>
<div class="lunbo">
    <div class="content">
        <ul id="item">
            <li class="item">
                <a href="${pageContext.request.contextPath}/productInfo.do?p_id=${10}">
                    <img src="image/banner.jpg"></a>
            </li>
            <li class="item">
                <a href="${pageContext.request.contextPath}/productInfo.do?p_id=${11}">
                    <img src="image/banner2.jpg"></a>
            </li>
            <li class="item">
                <a href="${pageContext.request.contextPath}/productInfo.do?p_id=${14}">
                    <img src="image/banner3.png"></a>
            </li>
            <li class="item">
                <a href="${pageContext.request.contextPath}/productInfo.do?p_id=${15}">
                    <img src="image/banner4.png"></a>
            </li>
            <li class="item">
                <a href="${pageContext.request.contextPath}/productInfo.do?p_id=${16}">
                    <img src="image/banner5.png"></a>
            </li>
        </ul>
        <div id="btn-left"><</div>
        <div id="btn-right">></div>
        <ul id="circle">

            <li class="circle"></li>
            <li class="circle"></li>
            <li class="circle"></li>
            <li class="circle"></li>
            <li class="circle"></li>
        </ul>
    </div>
</div>

<%----%>
<div id="forth">
   		<span>
        	<a href="${pageContext.request.contextPath}/product?method=show&t_id=1&currentPage=1"><img
                    src="image/hjh_01.gif"/></a>
            <a href=""><img src="image/hjh_02.gif"/></a>
            <a href=""><img src="image/hjh_03.gif"/></a>
            <a href=""><img src="image/hjh_04.gif"/></a>
            <a href=""><img src="image/hjh_05.gif"/></a>
            <a href=""><img src="image/hjh_06.gif"/></a>
        </span>
    <a href="" id="a_left"><img src="image/hongmi4x.png" width="316" height="170"/></a>
    <a href="" id="a_left"><img src="image/xiaomi5.jpg" width="316" height="170"/></a>
    <a href="${pageContext.request.contextPath}/productInfo.do?p_id=${1}"
       id="a_left"><img src="image/pinghengche.jpg" width="316" height="170"/></a>
</div>


<div id="fifth" style="display: flex; justify-content: space-between;">
    <span id="fif_text">小米手机 </span>
    <p style="margin-left: 0; margin-right: 20px;">
        <a href="productList.do">查看更多&gt;</a>
    </p>
</div>


<div class="waisixth" style="margin-top: 30px">
    <div id="sixth">
        <c:forEach items="${productList}" var="product">
        <span style="margin-top:20px; border-top:#ffa500 1px solid; height: 400px;">
        <a href="${pageContext.request.contextPath}/productInfo.do?p_id=${product.productId}">
            <img src="image/${product.imageUrl}" width="234" height="234"/></a>
        <a href="${pageContext.request.contextPath}/productInfo.do?p_id=${product.productId}"
           id="na">${product.productName}</a>
    <p>
    热销指数
    <c:forEach begin="1" end="${product.popularityIndex}">
        <img src="image/star_red.gif" alt="star"
             style="width: 13px; height: 13px; display: inline-block; margin-right: 5px;"/>
    </c:forEach>
    </p>
            <p id="chip">${product.description.substring(0, 16)}</p>

        <p id="pri">${product.price}元起</p>
        </span>
        </c:forEach>
    </div>
</div>
<!-- 底部 -->
<%@ include file="footer.jsp" %>
</body>
</html>